﻿<!DOCTYPE html><!--HTML5 doctype-->
<html>
<head>
<title>jqMobi Starter</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />


<link rel="stylesheet" type="text/css" href="styles/icons.css" /> 

<link rel="stylesheet"  type="text/css" href="themes/jq.ui.volcano.css" title="volcano" />


<!-- uncomment for AppMobi apps
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script> 
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script> 	
-->

<script type="text/javascript" charset="utf-8" src="./js/jq.ui.min.js"></script> 
<script type="text/javascript" charset="utf-8" src="./js/jq.template.js"></script> 
<script type="text/javascript" charset="utf-8" src="./js/jq.carousel.js"></script> 
<script type="text/javascript" charset="utf-8" src="./js/jq.drawer.js"></script> 
<script type="text/javascript" charset="utf-8" src="./js/jq.alphatable.js"></script> 
<script type="text/javascript" charset="utf-8" src="./js/jq.fx.js"></script> 


<!-- include touch.js on desktop browsers only -->
<script>

if(!((window.DocumentTouch&&document instanceof DocumentTouch)||'ontouchstart' in window)){
var script=document.createElement("script");
script.src="touch.js";
var tag=$("head").append(script);
$.os.android=true; //let's make it run like an android device
$.os.desktop=true;
}

$(document).ready(function(){

});

</script>




<script type="text/javascript">
    /* This function runs once the page is loaded, but appMobi is not yet active */
	var webRoot="./";
	$.ui.autoLaunch=false;
    var init = function(){
	   $.ui.backButtonText="Back";  
	   window.setTimeout(function(){$.ui.launch();},1500);
       //$.ui.removeFooterMenu(); This would remove the bottom nav menu
    };
    document.addEventListener("DOMContentLoaded",init,false);  
	$.ui.ready(function(){console.log('ready');});
   
    /* This code prevents users from dragging the page */
    var preventDefaultScroll = function(event) {
        event.preventDefault();
        window.scroll(0,0);
        return false;
    };
	
	document.addEventListener('touchmove', preventDefaultScroll, false);

    /* This code is used to run as soon as appMobi activates */
    var onDeviceReady=function(){
		AppMobi.device.setRotateOrientation("portrait");
        AppMobi.device.setAutoRotate(false);
		webRoot=AppMobi.webRoot+"/";
	    //hide splash screen
	    AppMobi.device.hideSplashScreen();	
		
    };
    document.addEventListener("appMobi.device.ready",onDeviceReady,false);    
	
</script>

</head>
<body>
    <div id="jQUi">
        <!-- this is the header div -->
        <div id="header">
        <a href="javascript:$.ui.toggleSideMenu()" class="button" style="float:right">Toggle Nav</a>
        </div>

        
        <div id="content">
            <!-- here is where you can add your panels -->
            <div title='Welcome' id="main" class="panel" selected="true" >
            This is a basic skeleton jqUi sample
            </div> 

        </div>

        <!-- bottom navbar.  Add additional tabs here -->
        <div id="navbar">
            <a href="#main" id='navbar_home' class='icon home' >home</a>
        </div>
        
        <!-- this is the default left side nav menu -->
        <nav>
            <div class='title'>Home</div>
                <ul>
                    <li class="icon home mini"><a href="#main">Selectors</a></li>
                </ul>
        </nav>
    </div>
</body>
</html>
